angular.module('app').config(($stateProvider) => {

    $stateProvider.state('app.modal', {
        url         : '/modal',
        label       : 'Modal',
        controller  : 'app.modal',
        controllerAs: '$ctrl',
        templateUrl : 'view/app/modal/modal.html'
    });
}).controller('app.modal', function ($ionicModal, $scope) {
    var ctrl = this;

    // 初始化 modal
    $ionicModal.fromTemplateUrl('templates/modal.tpl.html', {
        scope                  : $scope,
        animation              : 'slide-in-up',
        focusFirstInput        : true,
        backdropClickToClose   : true,
        hardwareBackButtonClose: true
    }).then(ionicModal=> ($scope.modal = ionicModal));

    ctrl.showModal = ()=> {
        var promise = $scope.modal.show();
        promise.then(()=> {
            console.log('modal show');
        });
    };
    $scope.$on('modal.shown', ()=> {
        console.log('modal has shown');
    });
    $scope.$on('modal.hidden', ()=> {
        console.log('modal has hidden');
    });
    $scope.$on('modal.removed', ()=> {
        console.log('modal has removed');
    });

    /**
     * $ionicModal
     */
    // fromTemplate(templateString, options)  返回一个 ionicModal 对象
    // fromTemplateUrl(templateUrl, options)  返回一个 promise, 该 promise resolve 一个 ionicModal 对象
    // - options
    //     scope
    //     animation: 显示/隐藏是的动画. 默认 'slide-in-up'
    //     focusFirstInput: 是否在显示时自动 focus 第一个 input 框. 默认 false. 注意: keyboard 只在 ios 上自动显示出来, android 上不会, android 上只有在安装了 [Ionic keyboard plugin] 插件才会.
    //     backdropClickToClose: 是否点击 Modal 背景区域关闭 modal.
    //     hardwareBackButtonClose: 是否可以通过点击 android 手机的返回键关闭 modal. 默认 true.

    /**
     * ionicModal 对象
     */
    // initialize(options) 创建一个 modal. options 同上面的 options
    // show() 显示 modal. 返回一个 promise, 当 modal 动画完成后 resolve
    // hide() 隐藏 modal. 返回一个 promise, 当 modal 动画完成后 resolve
    // remove() 从 dom 中删除. 返回一个 promise, 当 modal 动画完成后 resolve
    // isShown() 判断 modal 时候显示
});